<template>
    <div class="ph-subnav" @click.stop @mouseenter="onEnter" @mouseleave="onLeave" v-och="visible">
        <div class="ph-nav-handle" @click="onClick">
            <ph-button type="transparent" iconRight="caret-down" :iconRightFixed="true">{{title}}</ph-button>
        </div>
        <transition name="ph-upbit">
        <div class="ph-nav-dropdown" v-show="visible" ref="edropdown" :style="style">
            <slot></slot>
        </div>
        </transition>
    </div>
</template>
<script lang="ts">
import { defineComponent, computed, provide, ref, reactive } from 'vue'
import { PhButton } from 'ph-button'
import { supportTouch } from 'ph-util'
import { och } from '../../directives'
import getPosition from '../../shared/get-position'

export default defineComponent({
    directives:{och},
    components:{
        PhButton
    },
    props:{
        title:{
            type:String
        },
        hover:{
            type:Boolean,
            default:!supportTouch()
        }
    },
    setup(props) {
        provide("phNavCursor",ref(false))
        const visible = ref(false)
        const edropdown = ref<HTMLElement>()
        const style = reactive({
            left:"0",
            top:"0"
        })
        const hover = computed(()=>{
            return props.hover&&!supportTouch()
        })
        const rePosition =()=>{
            const {x,y} = getPosition(edropdown.value as HTMLElement)
            style.left = x + "px"
            style.top = y + "px"
        }
        const onEnter = ()=>{
            if(!hover.value)return
            visible.value = true
            rePosition()
        }
        const onLeave = ()=>{
            if(hover.value)
            visible.value = false
        }
        const onClick = ()=>{
            if(hover.value)return
            visible.value = !visible.value
            if(visible.value)rePosition()
        }
        return {
            visible,
            style,
            edropdown,
            onEnter,
            onClick,
            onLeave
        }
    },
})
</script>
<style lang="scss">
.ph-subnav{
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    z-index: 2;
    height: 100%;
    .ph-nav-handle{
        display: flex;
        height: 100%;
        align-items: center;
        flex: 0 0 auto;
        .ph-action{
            padding: var(--ph-nav-item-padding);
            padding-right: var(--ph-20);
        }
    }
    .ph-nav-dropdown{
        background-color: var(--ph-nav-bg);
        color: var(--ph-nav-color);
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 100%;
        box-shadow:0px 1px var(--ph-10) var(--ph-nav-bd);
        z-index: 1;
        .ph-nav-item{
            height: auto;
        }
    }
}
</style>
